<style lang="less" scoped>
.firm-name {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  color: #37c5ff;
  font-size: 24px;
  .icon-firm {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
  }
}
</style>
<template>
  <el-container class="page-unit-iot" direction="vertical">
    <unitIOTHeader :type="type"></unitIOTHeader>
    <el-container>
      <el-main class="unit-iot-main" :style="{ height: mainH + 'px' }">
        <el-row :gutter="36">
          <el-col :span="6">
            <h1 class="firm-name">
              <i class="iconfont icon-firm"></i> {{ name }}
            </h1>
            <DeviceInfo
              :data="dataObj.todayDeviceCountByState"
              v-if="dataObj"
            ></DeviceInfo>
            <AlarmType
              :data="dataObj.todayAlarm"
              class="mt-20"
              v-if="dataObj.todayAlarm"
            ></AlarmType>
          </el-col>
          <el-col :span="18">
            <DeviceList></DeviceList>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import unitIOTHeader from "@/components/unitIOTHeader.vue";
import DeviceInfo from "@/components/census/unitIOT/UnitDeviceInfo.vue";
import AlarmType from "@/components/census/unitIOT/UnitAlarmType.vue";
import DeviceList from "@/components/census/unitIOT/UnitDeviceList.vue";
export default {
  name: "UnitIOT",
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  components: {
    unitIOTHeader,
    DeviceInfo,
    AlarmType,
    DeviceList,
  },
  data() {
    return {
      type: this.$route.query.type,
      id: this.$route.query.id,
      name: this.$route.query.name,
      dataObj: {},
    };
  },
  watch: {},
  computed: {
    mainH() {
      return this.winH - 114;
    },
    ...mapState(["siteInfos"]),
  },
  methods: {
    getData(page) {
      this.openFullLoading();
      let url = "";
      switch (this.type) {
        case "pool":
          url = "/firewater/firewater/getHomePageData";
          break;
        case "smoke":
          url = "/independentsmoke/independentsmoke/getHomePageData";
          break;
        case "monitor":
          url =
            "/firefightingvisualization/firefightingvisualization/getHomePageData";
          break;
        case "fire":
          url = "/electricfire/electricfire/getHomePageData";
          break;
        case "chargingStation":
          url = "/chargingStation/chargingStation/getHomePageData";
          break;
        case "gas":
          url = "/combustiblegas/combustiblegas/getHomePageData";
          break;
        case "fireControl":
          url = "/fireFightingIOT/fireFightingIOT/getHomePageData";
          break;
      }
      if (!url) return;
      this.$get(url, {
        nums: 5,
        type: 1,
        businessId: this.id,
        userType: this.siteInfos.userType,
      }).then(
        (res) => {
          this.closeFullLoading();
          this.dataObj = res.data;
        },
        (err) => {
          this.closeFullLoading();
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
  },
  created() {
    if (this.type) {
      this.getData();
    }
  },
  activated() {},
  mounted() {},
};
</script>
